<template>
	<view class="content">
		<view class="info">
			<image src="/static/logo/logo.jpg" mode="" class="avatar"></image>
			<view class="info-data">
				<text>{{userInfo.name}}</text>
				<text class="small">推荐码：{{userInfo.agent_id}}</text>
				<text class="small">ID：{{userInfo.id}}</text>
			</view>
			<image src="/static/nav/notice.png" mode="" class="notice" @click="jumpPage('/pages/notice/notice')"></image>
		</view>
		<view class="wallet">
			<view class="wallet-total">
				<view class="wallet-total-head">
					<view class="">总资产</view>
					<image src="/static/icon/wen_icon.png" mode="" style="width: 1rem;height: 1rem;"></image>
				</view>
				<view class="huang">{{(Number(userInfo.money,2) + Number(userInfo.score) + Number(userInfo.lixi) + Number(userInfo.touzi)).toFixed(2)}}</view>
			</view>
			<view class="wallet-blance">
				<view>
					<text class="small">佣金钱包</text>
					<text>{{userInfo.money}}</text>
				</view>
				<view>
					<text class="small">复利钱包</text>
					<text>{{userInfo.score}}</text>
				</view>
				<view>
					<text class="small">利息钱包</text>
					<text>{{userInfo.lixi}}</text>
				</view>
				<view>
					<text class="small">投资钱包</text>
					<text>{{userInfo.touzi}}</text>
				</view>
			</view>
		</view>
		<view class="nav">
			<view class="my-nav-item" @click="jumpPage(item.jumpurl)" v-for="item,index in toolList" :key="index">
				<image :src="item.imgurl" mode="" class="icon"></image>
				<view>{{item.title}}</view>
			</view>
		</view>
		<view class="menu">
			<view class="menu-item"  @click="jumpPage(item.jumpurl,item)" v-for="item,index in menuList" :key="index">
				<image :src="item.imgurl" mode="" class="icon"></image>
				<view>{{item.title}}</view>
			</view>
			<view class="menu-item">
				<image src="/static/nav/tuichu.png" mode="" class="icon" @click="logout()"></image>
				<view>退出登录</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{
					touzi:0.00,
					money:0.00,
					lixi:0.00,
					score:0.00,
				},
				toolList:[
					{
						title:'充值',
						imgurl:'/static/nav/chongzhi.png',
						jumpurl:'/pages/recharge/recharge'
					},
					{
						title:'兑现',
						imgurl:'/static/nav/tixian.png',
						jumpurl:'/pages/withdraw/withdraw'
					},
					{
						title:'转账',
						imgurl:'/static/nav/zhuanzhang.png',
						jumpurl:'/pages/transfer/transfer'
					},
					{
						title:'兑换',
						imgurl:'/static/nav/duihuan.png',
						jumpurl:'/pages/exchange/exchange'
					},
					{
						title:'收益明细',
						imgurl:'/static/nav/zijin.png',
						jumpurl:'/pages/income/income'
					},
				],
				menuList:[
					{
						title:'一键复利',
						imgurl:'/static/nav/daili.png',
						jumpurl:'/pages/fuli/fuli'
					},
					{
						title:'邀请好友',
						imgurl:'/static/nav/share.png',
						jumpurl:'/pages/qrcode/qrcode'
					},
					{
						title:'收款账户',
						imgurl:'/static/nav/skzh.png',
						jumpurl:'/pages/myWalletInfo/myWalletInfo'
					},
					{
						title:'我的团对',
						imgurl:'/static/nav/team.png',
						jumpurl:'/pages/team/team'
					},
					{
						title:'实名认证',
						imgurl:'/static/nav/renzheng.png',
						jumpurl:'/pages/smrz/smrz'
					},
					{
						title:'账号安全',
						imgurl:'/static/nav/zhaq.png',
						jumpurl:'/pages/secure/secure'
					},
					{
						title:'平台公告',
						imgurl:'/static/nav/help.png',
						jumpurl:'/pages/notice/notice'
					},
					{
						title:'在线客服',
						imgurl:'/static/nav/kefu.png',
						jumpurl:'/pages/kefu/kefu'
					}
				],
				user_token:null
			};
		},
		onLoad() {
			this.getUserInfo()
		},
		methods:{
			getUserInfo(){
				let that = this
				uni.getStorage({
					key: 'user_token',
					success: function (res) {
						that.user_token = res.data
						that.checkUser()
					},
					fail: function(res){
						uni.showToast({
							title:'请先登录',
							icon:'none',
							success() {
								uni.redirectTo({
									url:'/pages/login/login',
								})
							}
						})
						
					}
				});
				
			},
			checkUser(){
				let that = this
				uni.request({
					url:getApp().globalData.baseUrl + '/api/user/getUserInfo',
					method:'POST',
					header: {token:that.user_token},
					success(res) {
						if(res.data.code == 401){
							uni.removeStorage({
								key:'user_tokne',
								success() {
									uni.showToast({
										icon:'none',
										title:'登录已失效,请重新登录',
										success() {
											setTimeout(function(){
												uni.redirectTo({
													url:'/pages/login/login'
												})
											})
										}
									})
								}
							})
						}
						that.userInfo = res.data.data
					},
					fail() {
						uni.showToast({
							title:'网络错误',
							icon:'none',
						})
					}
				})
			},
			logout(){
				let that = this
				uni.request({
					url:getApp().globalData.baseUrl + '/api/user/logout',
					method:'POST',
					header:{
						token: that.user_token
					},
					success(res) {
						uni.showToast({
							title:res.data.msg,
							icon:'none',
							success(sres) {
								uni.removeStorage({
									key:'user_token',
									success() {
										uni.redirectTo({
											url:'/pages/login/login'
										})
									}
								})
								
							}
						})
					},
				})
			},
			jumpPage(url){
				uni.navigateTo({
					url:url
				})
			},
			
		}
	}
</script>

<style lang="scss">
	page{
		background: #fff;
		background-image: url('/static/bag/mybg.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
	}
	.menu{
		display: flex;
		align-items: center;
		// width: 100%;
		justify-content: space-between;
		
		flex-wrap: wrap;
		margin: .6rem;
		padding: .8rem;
		border-radius: 1rem;
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
	}
	
	.menu-item{
		width: 25%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 1rem .6rem;
	}
	.menu-item > image{
		width: 1.6rem;
		height: 1.6rem;
	}
	
	.nav{
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: center;
		margin: 1rem 0;
	}
	
	.my-nav-item{
		width: 18%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.icon{
		width: 2.5rem;
		height: 2.5rem;
	}
	
	.wallet{
		display: flex;
		flex-direction: column;
		background: #ffff;
		margin: .6rem;
		padding: 1.3rem;
		border-radius: 1rem;
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
	}
	.huang{
		color: #c4a06c;
		font-size: 1.6rem;
		font-weight: bold;
	}
	
	.wallet-blance{
		margin-top: 1rem;
		display: flex;
		justify-content: center;
		// text-align: center;
	}
	
	.wallet-total-head{
		display: flex;
		align-items: center;
	}
	
	.wallet-total{
		
	}
	.info{
		display: flex;
		align-items: center;
		padding: 1rem;
		color: #fff;
		margin-top: 2rem;
	}
	.info-data{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-right: 8rem;
	}
	.info-data>text{
		margin: .1rem;
	}
	.avatar{
		width: 4rem;
		height: 4rem;
		border-radius: 40px;
		margin-right: 1rem;
	}
	
	.notice{
		width: 1.5rem;
		height: 1.5rem;
	}
	
	.content{
		display: flex;
		flex-direction: column;
	}
	.small{
		font-size: .8rem;
	}
</style>
